<template>
  <div class="delivery-append-form">

    <a-form :model="form" layout="inline">
      <a-form-item label="客户ID">
        <a-input disabled v-model="form.clientId" />
      </a-form-item>
      <a-form-item label="客户名">
        <a-input style="width: 400px;" disabled v-model="form.name" />
      </a-form-item>
      <a-form-item label="送货单号" class="delivery-number">
        <a-input style="width: 100px;"  disabled v-model="form.deliveryNumber" placeholder="自动生成"/>
      </a-form-item>
      <a-form-item label="送货日期">
        <a-date-picker style="width: 150px;" :default-value="moment(today, 'YYYY-MM-DD')" @change="onDateChange"/>
      </a-form-item>
      <a-form-item label="客户电话">
        <a-input v-model="form.clientPhone" />
      </a-form-item>
      <a-form-item label="送货地址">
        <a-input style="width: 400px;" v-model="form.deliveryAddress" />
      </a-form-item>
      <a-form-item label="货币">
        <a-input style="width: 100px;" v-model="form.currency" />
      </a-form-item>
      <a-form-item label="审核人">
        <a-input style="width: 150px;" v-model="form.reviewer" />
      </a-form-item>
      <a-form-item label="车牌号">
        <a-input v-model="form.plateNumber" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
const moment = window.moment;

import {
  getClientById,
  generateDate
} from '@/utils/commonFunc.js';


export default {
  name: "DeliveryAppendForm",
  data() {
    return {
      form: {
        clientId: '',
        name: '',
        deliveryNumber: '',
        deliveryDate: '',
        clientPhone: '',
        deliveryAddress: '',
        currency: 'RMB',
        reviewer: '',
        plateNumber: ''
      },
    };
  },
  computed: {
    today() {
      return generateDate() ;
    }
  },
  mounted() {
    this.form.deliveryDate = this.today;
    this.form.clientId = this.$route.params.clientId;
    const client = getClientById(this.$store.state.clientsCache, this.form.clientId);
    this.form.name = client.name;
    this.form.clientPhone = client.phone;
    this.form.deliveryAddress = client.address;
    if (this.$route.query.deliveryNumber) {
      this.form.deliveryNumber = this.$route.query.deliveryNumber;
    }
  },
  watch: {

  },
  methods: {
    onDateChange(date, dateString) {
      this.form.deliveryDate = dateString;
    },
    moment
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.delivery-append-form {
  form {
    display: flex;
    flex-wrap: wrap;
    .delivery-number {
      position: relative;
      &::before {
        position: absolute;
        width: 200%;
        top: -1.5rem;
        transform: translateX(-20%);
        content: '如果有送货单号，说明是在已有送货单中添加订单';
        color: rgb(180, 180, 180);
      }
    }
  }
}
</style>
<style lang="scss">
.delivery-append-form {
  .ant-form-item-label {
    width: 75px;
  }
}
</style>
